<!-- 外部人员账号 -->
<template>
	<div>
		<el-card class="box-card" style="height: 100%;">
			<div class="card-header" style="height: 100%;">
				<el-row :gutter="20">
					<el-col :span="6">
						<div class="grid-content bg-purple">
							<el-input v-model="queryInfo.account" placeholder="账号"></el-input>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content bg-purple">
							<el-button type="info" icon="el-icon-search" @click="getList()">搜索</el-button>
						</div>
					</el-col>
				</el-row>
			</div>
			<el-table :data="tableData" height="400" border style="width: 100%"
				@selection-change="handleSelectionChange" :default-sort="{prop: 'operTime', order: 'descending'}">
				<el-table-column type="selection" width="40" prop="id"></el-table-column>
				<el-table-column prop="id" sortable label="id"></el-table-column>
				<el-table-column prop="account" label="账号"></el-table-column>
				<el-table-column prop="nickname" label="昵称"></el-table-column>
				<el-table-column prop="type" label="账号状态" :formatter="fortype"></el-table-column>
				<el-table-column fixed="right" label="操作" width="100">
					<template #default="scope">
						<el-button type="text" size="small" @click="updateType(scope.row.id,scope.row.type)">修改状态</el-button>
					</template>
				</el-table-column>
			</el-table> 
			<!-- 分页-->
			<div class="block">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:page-sizes="[3, 6, 9, 12]" :page-size="3" layout="total, sizes, prev, pager, next, jumper"
					:total="total">
				</el-pagination>
			</div>
		</el-card>
	</div>
</template>

<script>
	export default {
	data() {
			return {
				tableData: [],
				queryInfo: {
					type: "",
					nickname: "",
					account: "",
					id: "",
					currentPage: 1,
					pagesize: 3,
				},
				total: 10,
				ckrow: []
			}

		},
		methods: {
			handleSelectionChange(val) {
				this.ckrow = val;
			},
			
			//改变页数大小时触发
			handleSizeChange(val) {
				this.queryInfo.pagesize = val;
				this.getList();
			},
			//选择页数触发
			handleCurrentChange(val) {
				this.queryInfo.currentPage = val;
				this.getList();
			},
			//查询列表
			getList() {
				var _this = this;
				this.$http.post("/user/getAccList", _this.queryInfo).then(function(res) {
					_this.tableData = res.data.List
					_this.total = res.data.total;
				})
			},
			fortype(row, column, cellValue, index) { // eslint-disable-line no-unused-vars
				if (cellValue == 2) {
					return "正常";
				}  else if(cellValue == -2){
					return "禁用";
				}
			},
			//修改状态
			updateType(id,type){
				var _this = this;
				_this.queryInfo.id = id;
				_this.queryInfo.type = type;
				this.$http.post("/user/updateType", _this.queryInfo).then(function(res) {
                    	window.location.reload();
				})
			}
			
		},
		created() {
			//加载列表
			this.getList();
		}
	}
</script>

<style>
	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;
	}
</style>
